<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>欢迎来到聊天室</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <script type="application/javascript" src="/js/jquery-3.5.1.min.js"></script>
  <script type="application/javascript" src="/layui/layui.js"></script>
  <script type="application/javascript" src="/js/plugin.js"></script>
</head>

<body class="layui-layout-body">

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-row layui-col-space15">
      <form class="layui-form" style="margin: 50px;">
        <div class="layui-form-item">
          <label class="layui-form-label">账号</label>
          <div class="layui-input-inline">
            <input type="text" name="user_account" required lay-verify="required" placeholder="请输入账号" autocomplete="off"
              class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">最大长度10个字符</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline">
            <input type="password" name="user_password" required lay-verify="required" placeholder="请输入密码"
              autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">8-16字符</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">称呼</label>
          <div class="layui-input-inline">
            <input type="text" name="user_name" required lay-verify="required" placeholder="请问怎么称呼您" autocomplete="off"
              class="layui-input">
          </div>
          <div class="layui-form-mid layui-word-aux">最大长度8个字符</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">单选框</label>
          <div class="layui-input-block">
            <input type="radio" name="user_sex" value="男" title="男">
            <input type="radio" name="user_sex" value="女" title="女" checked>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-inline">
            <input type="text" name="user_age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">手机号</label>
          <div class="layui-input-inline">
            <input type="text" name="user_phone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">地址</label>
          <div class="layui-input-inline">
            <input type="text" name="user_address" required lay-verify="required" placeholder="请输入地址" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="user_mail" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="register">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- <div class="layui-footer">
    </div> -->
  <script>
    //使用表单时，一定要添加依赖加载模块 
    layui.use('form', function () {
      var form = layui.form;

      //监听提交
      form.on('submit(register)', function (data) {
        //user注册信息返回结果
        $.ajax({
          type: "post",
          url: "/user/register",
          dataType: "html",
          contentType:"application/json",
          data: JSON.stringify(data.field),
          success:function () {
            iframe("#mainContext","login.html");
          }
        })
        return false;
      });
    });
  </script>
</body>

</html>